<template>
  <div class="tagItem flex flex-flow">
    <el-tag  v-for="(item, index) in categoryData" :key="index" type="warning"><a @click="tagClick(item)">{{item.name}}</a></el-tag>
  </div>
</template>

<script>
import { Tag } from 'element-ui'
export default {
  props: {
    categoryData: Array
  },
  mounted () {

  },
  data () {
    return {
    }
  },
  components: {
    elTag: Tag
  },
  methods: {
    tagClick (item) {
      this.$emit('tagClick', item)
    }
  }
}
</script>

<style scoped>
.tagPanel {
  font-size: 14px;
}
.tagItem {
  margin-top: 30px;
  padding: 0 4px 0 0;
  color: rgba(255,255,255, .6);
  background-color: rgba(1,126,102,0.08);
  height: 22px;
  line-height: 22px;
  font-weight: normal;
  font-size: 13px;
  text-align: center;
}
</style>
